<template>
	<div class="role-list">
		<list-title :data="header" @changeVisible="changeVisible"></list-title>
		<list-table :list="roleList" :tableLoading="tableLoading" :footer="false">
			<template v-slot:data>
				<el-table-column prop="rolename" label="角色名称"></el-table-column>
				<el-table-column prop="description" label="描述"></el-table-column>
				<el-table-column label="显示状态">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.display" @change="changeDisplay(scope.$index, scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200">
					<template slot-scope="scope">
						<el-button type='text' size="mini" @click="setPermission(scope.$index, scope.row)" v-if="auth.permissions">权限</el-button>
						<el-button type='text' size="mini" @click="handleEdit(scope.$index, scope.row)" v-if="auth.editor">编辑</el-button>
						<el-popover
						placement="top"
						width="160"
						v-model="delTip[scope.$index+1]" v-if="auth.delete">
							<p class="del-tip"><span class="el-icon-question"></span>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="delTip.splice(scope.$index+1, 1, false)">取消</el-button>
								<el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
							</div>
							<el-button type="text" slot="reference" :disabled='submitLock[scope.$index+1]'>
								删除 <span class="el-icon-loading" v-if='submitLock[scope.$index+1]'></span>
							</el-button>
						</el-popover>
					</template>
				</el-table-column>
			</template>
		</list-table>
		<!-- 添加 开始 -->
		<el-dialog :title="dialogTitle" :visible.sync="header.dialogs[0].visible" width="460px">
			<el-form :model="roleForm" :rules="rules" ref="roleForm" label-width="100px">
				<el-form-item label="角色名称" prop="data.rolename" style="width: 378px;">
					<el-input v-model="roleForm.data.rolename" placeholder="角色名称"></el-input>
				</el-form-item>
				<el-form-item label="描述" prop="data.description" style="width: 378px;">
					<el-input type="textarea" v-model="roleForm.data.description" placeholder="描述" rows="5"></el-input>
				</el-form-item>
				<el-form-item label="是否显示" prop="data.display">
					<el-switch v-model="roleForm.data.display"></el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="header.dialogs[0].visible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('roleForm')" :disabled='roleForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='roleForm.submitLock'></span>
				</el-button>
			</div>
		</el-dialog>
		<!-- 添加 结束 -->
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {changeToBool, judgeAuth} from "static/js/common.js"
import {mapGetters} from 'vuex'

export default {
	inject: ['reload'],
	data() {
		return {
			/*头部数据*/
			header: {
				title: '角色列表',
				reload: true,
				dialogs: [
					{
						title: '添加角色',
						type: 'primary',
						visible: false,
					}
				]
			},
			auth: {
				editor: false,//编辑
				delete: false,//删除
				permissions: false,//权限
			},
			dialogTitle: '添加应用',//dialog标题
			/*列表数据*/
			roleList: [
				// {
				// 	role_id: 1,
				// 	rolename: '仓管员',
				// 	description: '专门负责仓库',
				// 	display: false,
				// },
			],
			tableLoading: true,
			delTip: [],//刪除提示
			submitLock: [],
			/*添加表单数据*/
			roleForm: {
				submitLock: false,
				data: {
					id: 0,
					rolename: '',
					description: '',
					display: true,
				}
			},
			rules: {
				data: {
					rolename: [
						{ required: true, message: '请输入角色名称', trigger: 'blur' },
						{ min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
					]
				}
			}
		};
	},
	components: {
		ListTitle,
		ListTable
	},
	created: function() {
		/*获取列表数据*/
		this.getRoleList()
		/*权限判断显示*/
		this.header.dialogs[0].auth = (judgeAuth('addAdminRole', this.allMenuList) == undefined)?false:true
		this.auth.editor = (judgeAuth('modifyAdminRole', this.allMenuList) == undefined)?false:true
		this.auth.delete = (judgeAuth('deleteAdminRole', this.allMenuList) == undefined)?false:true
		this.auth.permissions = (judgeAuth('setPermissions', this.allMenuList) == undefined)?false:true
	},
	methods: {
		/*获取列表数据*/
		getRoleList: function(){
			this.$get(this.$api.adminRoleList).then(res => {
				// console.log(res);
				// if(res.data.code == 10007){//后台提示需要登录
				// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
				// 	this.reload();
				// }
				if(res.data.code === 0){
					if(res.data.data != undefined){
						this.roleList = []
						Object.keys(res.data.data).forEach((k) => {
							this.roleList.push ({
								role_id: res.data.data[k].role_id,
								rolename: res.data.data[k].rolename,
								description: res.data.data[k].description,
								display: changeToBool(res.data.data[k].display)
							});
						})
					}
					this.tableLoading = false
				}
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*编辑 打开编辑窗口，获取数据*/
		handleEdit(index, row) {
			// console.log(row)
			this.roleForm.submitLock = true;
			/*取出需要修改的数据*/
			this.dialogTitle = '编辑角色'
			this.header.dialogs[0].visible = true//显示修改的窗口
			this.$nextTick(() => {
				this.$refs.roleForm.resetFields()//清空表单
			})
			this.$get(this.$api.modifyAdminRole, {
				'id': row.role_id
			}).then(res => {
				if(res.data.code == 0){
					// console.log(res.data.data)
					this.roleForm.data.id = res.data.data.role_id
					this.roleForm.data.rolename = res.data.data.rolename
					this.roleForm.data.description = res.data.data.description
					this.roleForm.data.display = changeToBool(res.data.data.display)
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
				this.roleForm.submitLock = false;
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*删除*/
		handleDelete(index, row) {
			if(!this.submitLock[index+1]){
				this.submitLock[index+1] = true//锁住当前的 删除按钮
				this.delTip.splice(index+1, 1, false)//提示消失
				/*请求后台删除*/
				this.$post(this.$api.deleteAdminRole, {
					'id': row.role_id
				}).then(res => {
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
						this.roleList.splice(index, 1);//删除当前行
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
					this.submitLock[index+1] = false//释放当前的 删除按钮
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*dialog切换 方便子组件调用*/
		changeVisible: function(index){
			/*因为子组件调用的都是添加的行为，所以需要把id置为0(方便判断是添加还是修改)，title改为'添加应用'*/
			this.dialogTitle = '添加角色'
			this.roleForm.data.id = 0

			this.header.dialogs[index].visible = !this.header.dialogs[index].visible

			this.$nextTick(() => {
				this.$refs.roleForm.resetFields()//清空表单
			})
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.roleForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.roleForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addAdminRole//默认是添加
						if(this.roleForm.data.id > 0){//修改
							apiUrl = this.$api.modifyAdminRole
						}
						this.$post(apiUrl, {
							AdminRole: this.roleForm.data
						}).then(res => {
							// console.log(res);
							/*成功*/
							if(res.data.code == 0){
								this.getRoleList()
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'success'
								});
								if(this.roleForm.data.id > 0){//修改的话，关闭dialog
									this.header.dialogs[0].visible = false
								}
								this.$refs.roleForm.resetFields()//清空表单
							}else{
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'error'
								});
							}
							this.roleForm.submitLock = false;
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*设置权限*/
		setPermission: function(index, row) {
			console.log(row)
			this.$router.push(
				{
					name: 'pc/control/Permissions', 
					query: {
						id: row.role_id,
						name: row.rolename,
					}
				}
			)
		},
		/*列表中直接修改 更改状态*/
		changeDisplay(index, row){
			/*请求后台*/
			this.$post(this.$api.modifyAdminRole, {
				'AdminRole': {
					'id': row.role_id,
					'display': row.display
				}
			}).then(res => {
				if(res.data.code == 0){
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'success'
					});
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
			})
			.catch(err => {})
			.finally(() => {})
		}
	},
    computed: {
    	...mapGetters([
			'allMenuList'
		])
    }
};
</script>

<style lang="stylus" scoped>
.cell
	>.el-button + .el-button
		margin-left: 0;
</style>